document.addEventListener('DOMContentLoaded', function () {
    const cards = document.querySelectorAll('.version-card');
    let selectedVersion = null;

    // 确保有卡片元素
    if (cards.length > 0) {
        // 为每个卡片添加点击事件
        cards.forEach(card => {
            card.addEventListener('click', function (e) {
                // 添加点击动画效果
                this.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 100);

                // 处理选中状态
                if (this === selectedVersion) {
                    // 取消选中
                    this.classList.remove('selected');
                    selectedVersion = null;
                } else {
                    // 移除其他卡片的选中状态
                    cards.forEach(c => {
                        c.classList.remove('selected');
                        c.style.transform = 'scale(1)';
                    });

                    // 选中当前卡片
                    this.classList.add('selected');
                    selectedVersion = this;
                }

                const version = this.getAttribute('data-version');
                console.log('Selected version:', version);
            });

            // 添加鼠标悬停效果
            card.addEventListener('mouseenter', function () {
                if (this !== selectedVersion) {
                    this.style.transform = 'translateY(-5px)';
                }
            });

            card.addEventListener('mouseleave', function () {
                if (this !== selectedVersion) {
                    this.style.transform = 'translateY(0)';
                }
            });
        });
    }

    // 获取开始测试按钮并添加事件监听
    const startButton = document.querySelector('.start-button');
    if (startButton) {
        startButton.addEventListener('click', function () {
            if (!selectedVersion) {
                Swal.fire({
                    text: "请选择测评的版本",
                    timer: 2000,
                    icon: 'error',
                    // 指定自定义的 CSS 类名
                    customClass: {
                        popup: 'custom-swal'
                    },
                    height: 222,
                    width: 222
                });
                return;
            }
            const version = selectedVersion.getAttribute('data-version');
            console.log('Starting test with version:', version);
            location.href = 'question?key=' + version;
        });
    }
});

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

// 添加帮助说明函数
// 帮助说明函数移动端适配
function showMerchantOrderHelp() {
    Swal.fire({
        title: '如何查找商户单号？',
        html: `
            <div style="
                text-align: left; 
                padding: ${isMobile ? '8px' : '10px'};
                font-size: ${isMobile ? '13px' : '14px'};
            ">
                <p style="margin: ${isMobile ? '8px 0' : '10px 0'};">1. 打开您的支付宝/微信支付账单</p>
                <p style="margin: ${isMobile ? '8px 0' : '10px 0'};">2. 点击进入具体订单详情</p>
                <p style="margin: ${isMobile ? '8px 0' : '10px 0'};">3. 在订单详情中找到"商户单号"</p>
                <p style="margin: ${isMobile ? '8px 0' : '10px 0'};">4. 复制商户单号并粘贴到输入框中</p>
                <img src="/pay_desc.png" 
                    style="
                        max-width: 100%; 
                        margin-top: ${isMobile ? '8px' : '10px'};
                        border-radius: 4px;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    " 
                    alt="商户单号示例">
            </div>
        `,
        confirmButtonText: '我知道了',
        width: isMobile ? '90%' : '32rem'
    });
}


// 找回报告按钮点击事件
document.getElementById('recover-report-btn').addEventListener('click', function () {
    Swal.fire({
        title: '找回报告',
        html: `
                <div style="margin-bottom: ${isMobile ? '10px' : '15px'};">
                    <input type="text" 
                        id="merchant-order" 
                        class="swal2-input" 
                        name="order_no"
                        placeholder="请输入支付账单中的商户单号"
                        style="
                            width: ${isMobile ? '85%' : '90%'};
                            margin: ${isMobile ? '10px auto' : '15px auto'};
                            font-size: ${isMobile ? '14px' : '16px'};
                        ">
                    <div style="
                        margin-top: ${isMobile ? '8px' : '10px'}; 
                        font-size: ${isMobile ? '12px' : '13px'}; 
                        color: #666;
                        padding: 0 ${isMobile ? '10px' : '0'};
                    ">
                        <a href="#" 
                            onclick="showMerchantOrderHelp(); return false;" 
                            style="
                                color: #1890ff;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 5px;
                            ">
                            <i class="fas fa-question-circle"></i> 
                            <span>如何查找商户单号？</span>
                        </a>
                    </div>
                </div>
            `,
        showCancelButton: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
    }).then((result) => {
        console.log(result.value)
        if (result.isConfirmed) {
            $.ajax({
                url: '/results',
                method: 'POST',
                data: {
                    order_no:$("#merchant-order").val()
                },
                success: function (response) {
                    if (response.code == 0) {
                        questions = response.data;  // 将数据赋值给全局变量
                        Swal.fire({
                            allowEscapeKey: false, // 禁止ESC键关闭弹窗
                            allowEnterKey: false, // 禁止回车键关闭弹窗
                            showCloseButton: false, // 隐藏关闭按钮
                            text: '正在获取报告',
                            icon: 'success',
                            timer: 1000, // 弹窗显示2秒
                            showConfirmButton: false, // 不显示确认按钮
                            allowOutsideClick: false, // 禁止点击弹窗外部关闭弹窗
                            didOpen: () => {
                                Swal.showLoading(); // 显示加载动画
                            },
                            willClose: () => {
                                return false; // 阻止弹窗关闭
                            }
                        }).then(() => {
                            // 2秒后进行页面跳转
                            window.location.href = `/report?order_no=${questions.order_no}&secret=${questions.password}`;
                        });
                    } else {
                        Swal.fire({
                            text: response.msg,
                            timer: 1000,
                            icon: 'error',
                            // 指定自定义的 CSS 类名
                            customClass: {
                                popup: 'custom-swal'
                            },
                            height: 222,
                            width: 222
                        });
                    }
                },
                error: function (error) {
                }
            });
        }
    });
});

// 添加全局样式
const style = document.createElement('style');
style.textContent = `
    /* 移动端样式 */
    @media (max-width: 768px) {
        .my-swal-container {
            padding: 10px;
        }
        
        .my-swal-popup {
            font-size: 14px !important;
            padding: 15px !important;
        }
        
        .my-swal-input {
            font-size: 14px !important;
            padding: 8px 12px !important;
        }
        
        .my-swal-confirm-button,
        .my-swal-cancel-button {
            font-size: 14px !important;
            padding: 8px 15px !important;
        }
        
        .swal2-title {
            font-size: 18px !important;
            padding: 10px 0 !important;
        }
        
        .swal2-html-container {
            margin: 10px 0 !important;
        }
    }
`;
document.head.appendChild(style);